<template>
	<view class="me-div">
        <!--未登陆-->
		<div class='unlogin' v-if='!userInfo'>
			<image src="/static/img/unlogin.png" mode=""></image>
			<button type="primary" open-type='getUserInfo' @getuserinfo="onLogin">登陆</button>
		</div>
		
		<!--已登陆-->
		<div class='logined white_bg' v-if='userInfo'>
			<!--用户信息展示-->
			<div class="userinfo padding10">
				<image :src="userInfo.avatarUrl" mode=""></image>
				<div class='info'>
					<p class='name'>{{userInfo.nickName}}</p>
					<p class='tele' v-show='userInfo.telephone'>{{userInfo.telephone}}</p>
					<button class='getphone' v-show='!userInfo.telephone'
						open-type='getPhoneNumber' @getphonenumber="getMePhoneNum">获取手机号</button>
				</div>
			</div>
			
			<view class="uni-list margin_top30">
				<view class="uni-list-cell">
					<navigator url="/pages/address/list/index?">
						<view class="uni-list-cell-navigate uni-navigate-right">
							收件人地址
						</view>
					</navigator>
				</view>
				<view class="uni-list-cell">
					<navigator url="/pages/address/list/index?mine=1">
						<view class="uni-list-cell-navigate uni-navigate-right">
							我的地址
						</view>
					</navigator>
				</view>
			</view>
			<view class="uni-list margin_top30">
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<!-- #ifdef APP-PLUS -->
						<span>联系我们</span>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class='kefu' open-type="contact">联系我们</button>
						<!-- #endif -->
					</view>
				</view>
				<view class="uni-list-cell">
					<view @click='aboutUs' class="uni-list-cell-navigate uni-navigate-right">
						关于我们
					</view>
				</view>
				<view class="uni-list-cell" @click="clearStorage">
					<view class="uni-list-cell-navigate uni-navigate-right">
						清除缓存
					</view>
				</view>
			</view>
		</div>
		
		<MyRight />
	</view>
</template>

<script>
import MyRight from '@/components/myright.vue';
import {post,setLocalStorage,getLocalStorage,removeLocalStorage,
		showToast,getSystemInfo} from '../../utils/index.js';
import {loginUrl,getPhoneNumberUrl} from '../../config.js';
import {mapActions,mapGetters} from 'vuex';
export default {
	data() {
		return {
			
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		MyRight
	},
	methods: {
		getMePhoneNum(e){
			let self = this
			let getData = e.detail;
			if(getData.errMsg!="getPhoneNumber:ok"){  //用户拒绝
				return;
			}
			post(getPhoneNumberUrl, {
				encryptedData: getData.encryptedData,
				iv: getData.iv
			})
			.then((res)=>{
				if(res.code==200){
					let userInfo = self.userInfo;
					userInfo.telephone = res.data.phone;
					setLocalStorage('userInfo',userInfo);
					self.$store.dispatch('setUserInfo', userInfo);
				}else{
					showToast(res.errMsg);
				}
			});
		},
		//获取用户信息，登陆
		onLogin(e){
			var self = this;
			var getData = e.target;  //用户信息都在这里
			//授权登陆，获取用户信息
			new Promise((resolve, reject)=>{
			    wx.login({
			        success: function(res){
			            var code = res.code;
			            resolve(code);
			        }
			    });
			})
			.then((code)=>{
				uni.showLoading({
					title: '登陆中...'
				});
				let obj = {
				    iv: getData.iv,
				    code: code,
				    encryptedData: getData.encryptedData,
				    rawData: getData.rawData,
				    signature: getData.signature
				};
				post(loginUrl, obj)
				.then((res)=>{
					if(res.code==200){
						let session_token = res.data.session_token;
						let getUserInfo = getData.userInfo;
						let userInfo = {
							avatarUrl: getUserInfo.avatarUrl,
							nickName: getUserInfo.nickName,
							session_token: res.data.session_token,
							telephone: res.data.phone
						};
						setLocalStorage('userInfo',userInfo);
						self.$store.dispatch('setUserInfo', userInfo);
					}else{
						//错误提示
						var errMsg = res.errMsg;
						showToast(errMsg);
					};
				});
			});
		},
		
		//跳转到关于我们的页面，该页面使用的是web-view组件
		aboutUs(){
			//#ifdef MP-WEIXIN
			var systemInfo = getSystemInfo();
			if(systemInfo.version < '6.7.2'){
				showToast('请更新至最新版');
				return;
			}
			//#endif
			uni.navigateTo({
				url: '/pages/aboutus/index'
			});
		},
	
		//清除缓存
		clearStorage(){
			uni.showLoading({
				title: '清除中...'
			});
			setTimeout(()=>{
				uni.hideLoading();
				removeLocalStorage('userInfo');
				this.$store.dispatch('setUserInfo', '');
				showToast('清除成功','success');
			},1000);
		}
	}
}
</script>

<style lang="less">
@import '../../style/default.less';
/**未登录**/
.unlogin{
	text-align: center;
	margin-top:35%;
	image{
		width: 200upx;
		height: 200upx;
	}
	button{
		width: 60%;
	}
}
/**已登陆**/
.logined{
	/**用户信息**/
	.userinfo{
		display: flex;
		align-items: center;
		height: 120upx;
		image{
			width:100upx;
			height: 100upx;
			border-radius: 50%;
			margin-right:10upx
		}
		p.tele{
			color: #666;
		}
		/*获取手机号*/
		button.getphone{
			padding: 10upx;
			font-size: 30upx;
			background: @mainColor;
			color: #fff;
			line-height: initial;
			margin-top: 4upx;
		}
	}
}
navigator{
	width: 100%;
	display: block;
}
/**客服按钮**/
.kefu{
	width: 100%;
	display: inline-block;
	line-height: initial;
	border: none;
	outline: none;
	font-size: 32upx;
	padding: 0;
	background: initial;
	color: #333;
	margin-left: 0;
	text-align: left;
	&:after{
		border: none;
	}
}
</style>
